import { mapState } from "vuex";

export default {
  computed: {
    ...mapState({
      safeArea: (s) => s.sysInfo.safeArea,
      staH: (s) => s.sysInfo.statusBarHeight,
      clientWidth: (s) => s.sysInfo.windowWidth,
    }),
  },
  data() {
    return {
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      tabIdx: this.tarTab,
      swiperIdx: this.tarTab,
    };
  },
  watch: {
    swiperIdx(val) {
      this.$emit("change", val);
    },
  },
  methods: {
    onTabsChange(index) {
      this.swiperIdx = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    onTrans(e) {
      let { dx } = e.detail;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    onAnimFinish(e) {
      let { current } = e.detail;
      this.$refs.uTabs.setFinishCurrent(current);
      this.setTab(current);
    },
    setTab(idx) {
      this.swiperIdx = idx;
      this.tabIdx = idx;
    },
  },
};
